The present invention relates generally to document layout, and more particularly to systems and methods for automatically optimizing the layout and attributes of components of an electronic document based on attributes of the content of the components.
The use of computers in generating designs of both printed and electronic documents is ubiquitous.
To assist designers and customers in quickly creating personalized and customized graphic, printed, and electronic product designs, several applications and websites offer fillable document design templates which include editable fields for receiving user-inserted content (such as text or images). For example, the website Vistaprint.com markets a variety of printed products, embroidered products, engraved products, and electronic products such as website hosting and accompanying traditional and mobile-ready web pages. Vistprint.com allows a user to select a customizable design template prepared by employees or agents of the company and to use online tools provided by the site to incorporate the user's personal information and content into the templates to create a custom product design. When the design is completed to the user's satisfaction, the user can place an order through the site for production and delivery of a desired quantity of the corresponding product.
The content of a design typically includes a layout, text and/or image content, a color scheme, and a font scheme.
Developments in computer and internet technologies has lead to the common practice of defining graphic and electronic versions of a design using a markup language such as HTML, DHTML, VML, XML, etc., each of which is well-known in the art, wherein various individual components of a design can be individually specified and simultaneously rendered on an electronic display such as a computer screen, a smartphone screen, a tablet or pad screen. In a common implementation, a design template typically includes one or more of an individual layout component, one or more individual image components, one or more individual font scheme components, and one or more individual color scheme components. Each individual component may be individually specified using a markup language component “tag” and may further define component-specific attributes for that particular component. A layout component may specify the overall size of the design, along with the placement and size of all fillable text and image containers within the design. In some templates, the size and placement of the text and/or image containers may be edited by the user of the template, while other templates are defined to lock the size and position of the containers to prevent the user from editing the underlying layout.
Each image component in a design template may be designated as either a foreground image or a background image. Typically, each image is placed in a corresponding defined image container as set forth in the layout component.
When a template designer creates a design template, the template designer strategically places the various components so as to allow insertion by a user of the template of content into each of the variable-content components (hereinafter “user-content components”) while still achieving an aesthetically pleasing design. For example, FIG. 1A shows an example of a customizable design template 100, and FIG. 1B shows the corresponding component view 100′. As illustrated in FIG. 1B, the template 100 is implemented by rendering a plurality of different text components 101, 102, 103, 104, 105, 106, 107, over a background image component 130 with image features 131 and 132. A design template comprises a specification of each component in the design, including corresponding attributes such as size, position, and other attributes specific to the type of component. For example, a text component would typically include a size attribute, a position attribute, a font style attribute, a font size attribute, a font color attribute, and other attributes such as a wrapping indicator that indicates whether text that is too long for the width of the specified size is to wrap to the next line, etc. A text component may also include an attribute that indicates whether or not a user can edit the text content in the text component, and may further include a default value for the text content. An image component may include corresponding attributes such as size (height and width) and position, z-index (which indicates on which layer the image should be rendered), image content (e.g., the location and name of an image file) that is to be rendered as content in the image component, and other attributes such as whether a user can replace the image content in the image component.
In the particular design template shown in FIGS. 1A and 1B, the various text components 101-107 containing the sample text “Company Name”, “Headline Here”, “Special Offer”, “Phone/Other”, and “Address Line 1”, “Address Line 2” and “Address Line 3” are designed as placeholder user-content components where a user can insert their own customer-specific text. Based on the sizes, positions, and sample text, of the various text components, a human viewing a design template can make inferences about the template designer's intent when the template was created. In the illustrated design, the placeholder text components 101-107 containing the sample text are placed in particular positions in the design relative to each other and to particular features 131 and 132 in the background image 130. For example, the “Company Name” and “Headline Here” text components 101 and 102, are prominently placed near the top of the design template 100 with the inferred intent of the template designer that the “Company Name” and any headline or title of the design will catch the reader's attention. Further inferences of the template designer's intent can be drawn based on the size of the fonts of each component relative to each other, and from the spacing of the various text components relative to each other. For example, the components 105, 106 and 107, containing sample text “Address Line 1” 115, “Address Line 2” 116 and “Address Line 3” 117, each have identical font size, and are each positioned on separate lines with minimal spacing near the bottom of the template. It may be inferred based on these observations that the intent of the template designer is that these three text components are closely related and should stay together. Further inferences can be drawn by a human observing the template 100 or template layout 100′. The challenge, however, is to develop a technique for automating the recognition of the layout and any inferences that can be drawn therefrom, and then to automatically adjust the layout in such a way that would be aesthetically pleasing or comfortable to a human viewer and which takes into account the intent of the template designer based on inferences that are automatically derived from the original template prior to entry of user content.
The component view 100′ in FIG. 1B of the design 100 shown in FIG. 1A shows a box around each text component 101, 102, 103, 104, 105, 106 and 107, indicating the position and size of each of the text components specified in the template. From the positioning of the text components 101-107 relative to the features 131 and 132 in the background image 130, one can further infer that none of the content of the components 101-107 is intended to cross the boundaries of the features 131 or 132. This can be inferred from the fact that the text components 101-107 are sized and positioned such that none of the boundaries of the text components as specified in the template 100′ cross over the boundaries of any of the important background image features 131, 132.
When a template designer designs a design template for use by 3rd-party users, the designer typically creates the design with a specific purpose, specific intended use, and/or specific design aesthetics in mind. When the resulting template is used in such a way as to fulfill the designer's intent, for example by inserting the designer's intended contemplated amount of text or size of image into corresponding containers in the design, the resulting design will typically be aesthetically pleasing. However, oftentimes, the amount of text content or size of an image that a 3rd-party user desires to place in a corresponding container of the design is more than that contemplated by the designer. This can result in text-wrapping and overlapping of user-inserted content with content of other components and/or fixed visual features of the background or other image(s).
FIGS. 2A and 2B show a user document 200 (FIG. 2A) and corresponding component view 200′ (FIG. 2B) after a user has inserted text into some of the user-editable text components 101, 102, 103, 104, 105, 107 of the template 100. In this example, the user has inserted text 222 in the header text component 102. The amount of text 222 does not fit on one line, and the last word has wrapped to a second line. In addition, the “Phone/Other” component text 224 that was inserted by the user is also too long for the contemplated amount of text and consequently wrapped from one to three lines, which overlaps the text content 225 and 227 of the text components 105 and 107.
While it may be possible for the user to make changes to the amount of text content in each of text components 102 and 104, it may be desirable to have a system which could automatically adjust parameters and/or attributes of the editable components themselves, based on the size or amount of inserted user content, to reconfigure the design to a more aesthetically pleasing design.